Day2 [Frontend] Conceive the UI and UX

Preface

To achieved the goal, I'm not going to narrate on the syntax or framework on this article, which means to read this artice, the basic knowledge of flutter is required.

Begin

There are several types of views available for arranging widgets in various ways.
These are commonly use to lay out :

• ListView
• GridView
• Column
• Row
• Stack
• Table
• PageView
• SingleChildScrollView

I don't actually have a prototype or blueprint. So I'm just taking the widget subjective as an end-user.
I think the best way to present the note is a scrollable page with a reorderable gridview for rendering notes, set a floating action button for adding notes, then wrap them with stack widget.
Also,make the drawer with user info and logout button.

Last but not least, make a mixin template to check the context screen size and mixin into page, So that widgets can be auto resized properly depending on screen size.

Special mention

• Position a column inside the stack may caused rendering error, you had to set the parameter to

  fit: StackFit.expand,

Ref(click me)
for stack widget.

• I'm using reorderable_grid_view (click me) pkg, it supports 6 platform for Drag-n-Drop reorderable_grid_view, but there's a issue that didn't been resolved by flutter and it caused windows desktop's stylus Drag-n-Drop feature can't work properly. which means every platform supported by this project will be able to have Drag-n-Drop feature except unless you are using stylus on windows.

issue Ref(click me)

Demo and code

Image demo

video demo link (click me)

Github code source (click me)

Feel free to criticize and correct me ! THX for reading this article.